<template>
    <div>
        <blur class="bl" :blur-amount="20" :url="album.covers[0]" height="200">
            <div class="b-1">
                <h1> {{album.name}} </h1>
                <h2> {{album.count}}个收集 · {{album.like_count}}人喜欢</h2>
                <div class="v-1" style="margin: 20px auto 20px;"></div>
                <img class="mg-1" :src="album.user.avatar" />
                <p> by &nbsp;&nbsp;{{album.user.username}} </p>
            </div>
        </blur>
        <!--列表-->
        <div class="list">
            <div class="list-1">
                <div class="box-list" v-for="b in bys">
                    <img :src="b.photo.path" />
                    <p> {{b.msg}}</p>
                    <p class="like">★&nbsp;{{b.favorite_count}}</p>
    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Blur } from 'vux'
export default {
    components: {
        Blur
    },
    data() {
        return {
            album: {},
            bys: []
        }
    },
    mounted: function () {
        this.requestLun()
        this.requestBy_album()
    },
    methods: {
        requestLun() {
            this.$http.get("dt/napi/album/detail/?", {
                params: {
                    include_fields: "[share_links,share_info,covers,members,member_count,managers]",
                    album_id: this.$route.params.id
                }
            })
                .then(function (res) {
                    // console.dir(res.data.data)
                    this.album = res.data.data
                }.bind(this))
        },
        requestBy_album() {
            this.$http.get("dt/napi/blog/list/by_album/?", {
                params: {
                    start: 0,
                    include_fields: "[sender, album]",
                    limit: 24,
                    album_id: this.$route.params.id,
                    _: 1497613047465
                }
            })
                .then(function (res) {
                    console.dir(res.data.data.object_list)
                    this.bys = res.data.data.object_list
                    // console.dir(this.bys)
                }.bind(this))
        }
    }
}
</script>
<style scoped>
.v-1 {
    height: 1px;
    width: 60%;
    border-bottom: 0.5px solid white;
    position: relative;
    top: 25px;
    opacity: 0.5;
}
.b-1 {
    text-align: center;
    color: white;
}
.b-1 p {
    font-size: 12px;
}
.mg-1 {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    margin-top: 50px;
}
h1 {
    margin: 0 48px 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
h2 {
    font-size: 12px;
    font-weight: 500;
}
.bl {
    padding: 20px 0;
    margin-bottom: 5px;
}
/*列表*/

.list {}

.list .list-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5px;
    background-color: #F5F5F5;
}

.list .box-list {
    padding: 0px;
    color: #333;
    box-shadow: 0 2px 0 0 #D2D2D2;
    flex-basis: 47%;
    margin: 2% auto;
    background-color: white;
}
.list .box-list p {
    padding: 0px 8px;
}
.like {
    color: #999;
    font-size: 12px;
}
.list .box-list img {
    width: 100%;
    height: 162px;
}
</style>
